// 项目进展查看
<template>
  <div class="projectProgress">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="项目名称：">
        <el-input v-model="formInline.projectName" placeholder="请输入项目名称"></el-input>
      </el-form-item>
      <el-form-item label="状态：">
        <el-select v-model="formInline.status" placeholder="全部">
          <el-option label="全部" value=""></el-option>
          <el-option label="即将开始" value="0"></el-option>
          <el-option label="申购中" value="1"></el-option>
          <el-option label="运营中" value="2"></el-option>
          <el-option label="已清算" value="3"></el-option>
          <el-option label="已终止" value="4"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" id="monitorEnter">查询</el-button>
      </el-form-item>
    </el-form>
    <template>
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          fixed
          align=center
          label="序号"
          type="index"
          width="80">
        </el-table-column>
        <el-table-column
          align=center
          prop="projectName"
          label="项目姓名"
          width="120">
        </el-table-column>
        <el-table-column
          align=center
          prop="investMoney"
          label="跟投总额(元)"
          width="120">
        </el-table-column>
        <el-table-column
          align=center
          prop="directionalProportion"
          label="定向比例"
          width="120">
        </el-table-column>
        <el-table-column
          align=center
          prop="directionalNum"
          label="定向人数"
          width="120">
        </el-table-column>
        <el-table-column
          align=center
          prop="raiseInvestProportion"
          label="募集比例"
          width="120">
        </el-table-column>
        <el-table-column
          align=center
          prop="investNum"
          label="募集份数(份)"
          width="120">
        </el-table-column>
        <el-table-column
          align=center
          prop="alreadyBuyNum"
          label="已申购人数"
          width="120">
        </el-table-column>
        <el-table-column
          align=center
          prop="alreadyPay"
          label="已支付金额（元）"
          width="150">
          <template slot-scope="scope">
            {{scope.row.alreadyPay | numFormat}}
          </template>
        </el-table-column>
        <el-table-column
          align=center
          prop="lockPay"
          label="已锁定金额（元）"
          width="150">
          <template slot-scope="scope">
            {{scope.row.lockPay | numFormat}}
          </template>
        </el-table-column>
        <el-table-column
          align=center
          prop="canInvestMoney"
          label="可申购金额（元）"
          width="150">
          <template slot-scope="scope">
            {{scope.row.canInvestMoney | numFormat}}
          </template>
        </el-table-column>
        <el-table-column
          align=center
          prop="statusTxt"
          label="状态"
          width="120">
        </el-table-column>
        <el-table-column
          align=center
          fixed="right"
          label="操作">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <div class="block">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageData.pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageData.pageSize"
        layout="total, sizes, prev, pager, next"
        :total="totalSize">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import api from '@/api/apiPath'
export default {
  name: 'projectProgress',
  title:'项目进展查看',
  data(){
    return {
      totalSize:0,
      pageData:{
        pageSize:10,
        pageNum:1
      },
      formInline: {
        projectName: '',
        status: ''
      },
      tableData: []
    }
  },
  filters:{
    numFormat(val ){
      val += ''
      let x = val.split('.');
      let x1 = x[0] 
      let x2 = x.length > 1 ? '.' + x[1] : ''
      var rgx = /(\d+)(\d{3})/  
      while (rgx.test(x1)) {  
      x1 = x1.replace(rgx, '$1' + ',' + '$2')
      }
      return x1 + x2
    }
  },
  created(){
    this.list()
  },
  activated(){
    this.list()
  },
  methods:{
    onSubmit() {
      this.list()
    },
    list(){
      this.axios.post(api.projectProgressList, {
        pageNum:this.pageData.pageNum,
        pageSize:this.pageData.pageSize,
        projectName:this.formInline.projectName,
        projectStatus:this.formInline.status
      }).then((res)=>{
        this.tableData = res.data.data.list
        this.totalSize = res.data.data.total
        this.tableData.forEach((item)=>{
          if(item.projectStatus == 0){
            item.statusTxt = '即将开始'
          }else if(item.projectStatus == 1){
            item.statusTxt = '申购中'
          }else if(item.projectStatus == 2){
            item.statusTxt = '运营中'
          }else if(item.projectStatus == 3){
            item.statusTxt = '已清算'
          }else if(item.projectStatus == 4){
            item.statusTxt = '已终止'
          }
        })
      }).catch((error)=>{
        console.log(error)
      })
    },
    handleClick(row) {
      this.$router.push({path:'/projectProgressCheck',query:{
        projectId:row.projectId,
        projectView:JSON.stringify(row)
      }})
    },
    handleSizeChange(val) {
      this.pageData.pageSize = val
      this.list()
    },
    handleCurrentChange(val) {
      this.list()
      console.log(`当前页: ${val}`);
    }
  }
}
</script>

<style lang="stylus">
.projectProgress{
  .el-table{
    margin-bottom:20px;
  }
}
</style>
